<template>
  <a-drawer
    :visible="visible"
    title="报价单明细"
    placement="right"
    :width="'50%'"
    @after-open-change="afterOpenChange"
    @close="onClose"
    :body-style="{ padding: '0.7vw 1vw'}"
  >
    <div class="quotation-form" v-if="!loading">
      <!-- 三大区域：产品资料、人工成本、其他成本 垂直堆叠布局 -->
      <div class="vertical-section">
        <!-- 产品资料 -->
        <div class="section">
          <h3 class="section-title">产品资料</h3>
          <div class="form-group">
            <div class="item" v-for="field in productInfoFields" :key="field.key">
              <label>{{ field.label }}</label>
              <a-input
                v-if="!field.type"
                :value="productInfo[field.key]"
                @change="e => productInfo[field.key] = e.target.value"
                size="small"
              />
              <a-select
                v-else-if="field.type === 'select' && field.key === 'xmqducstus'"
                :value="productInfo[field.key]"
                @change="value => productInfo[field.key] = value"
                size="small"
                class="small-select quote-status-select-wide"
              >
                <a-select-option
                  v-for="item in dropDownList.quote_check"
                  :key="item.gzcbl002"
                  :value="item.gzcbl002"
                >
                  {{ item.gzcbl004 }}
                </a-select-option>
              </a-select>
              <a-textarea
                v-else-if="field.type === 'textarea'"
                :value="productInfo[field.key]"
                @change="e => productInfo[field.key] = e.target.value"
                :auto-size="{ minRows: 1, maxRows: 2 }"
                size="small"
              />
              <a-date-picker
                v-else-if="field.type === 'date'"
                :value="productInfo[field.key] ? dayjs(productInfo[field.key]) : null"
                @change="(_, dateString) => productInfo[field.key] = dateString"
                size="small"
                value-format="YYYY-MM-DD"
              />
              <span
                v-if="productInfo[field.key + 'Name']"
                class="external-info"
                :title="productInfo[field.key + 'Name']"
                :class="{ 'customer-info': field.key === 'xmqduc007' }"
              >
                {{ productInfo[field.key + 'Name'] }}
              </span>
              <span v-if="field.unit" class="unit">{{ field.unit }}</span>
            </div>
          </div>
        </div>

        <!-- 人工成本 -->
        <div class="section">
          <h3 class="section-title">人工成本</h3>
          <div class="form-group">
            <div class="item" v-for="field in laborCostFields" :key="field.key">
              <label>{{ field.label }}</label>
              <a-input
                v-if="field.type !== 'select' && field.type !== 'date' && field.type !== 'textarea'"
                :value="laborCost[field.key]"
                @change="e => laborCost[field.key] = e.target.value"
                size="small"
                :class="{'special-wage-field': field.key === 'xmqduc020'}"
              />
              <a-select
                v-else-if="field.type === 'select' && field.key === 'xmqduc038'"
                :value="laborCost[field.key]"
                @change="value => laborCost[field.key] = value"
                size="small"
                class="small-select"
              >
                <a-select-option
                  v-for="item in dropDownList.quote_tech"
                  :key="item.gzcbl002"
                  :value="item.gzcbl002"
                >
                  {{ item.gzcbl004 }}
                </a-select-option>
              </a-select>
              <a-textarea
                v-else-if="field.type === 'textarea'"
                :value="laborCost[field.key]"
                @change="e => laborCost[field.key] = e.target.value"
                :auto-size="{ minRows: 1, maxRows: 2 }"
                size="small"
              />
              <a-date-picker
                v-else-if="field.type === 'date'"
                :value="laborCost[field.key] ? dayjs(laborCost[field.key]) : null"
                @change="(_, dateString) => laborCost[field.key] = dateString"
                size="small"
                value-format="YYYY-MM-DD"
              />
              <span
                v-if="laborCost[field.key + 'Name']"
                class="external-info"
                :title="laborCost[field.key + 'Name']"
                :class="{ 'customer-info': field.key === 'xmqduc007' }"
              >
                {{ laborCost[field.key + 'Name'] }}
              </span>
              <span v-if="field.unit" class="unit">{{ field.unit }}</span>
            </div>
          </div>
        </div>

        <!-- 其他成本 -->
        <div class="section">
          <h3 class="section-title">其他成本</h3>
          <div class="form-group">
            <div
              class="item"
              v-for="field in otherCostFields"
              :key="field.key"
              :class="{ 'full-width': field.type === 'textarea' }"
            >
              <label>{{ field.label }}</label>
              <a-input
                v-if="!field.type"
                :value="otherCost[field.key]"
                @change="e => otherCost[field.key] = e.target.value"
                size="small"
              />
              <a-select
                v-else-if="field.type === 'select' && field.key === 'xmqduc038'"
                :value="otherCost[field.key]"
                @change="value => otherCost[field.key] = value"
                size="small"
                class="small-select"
              >
                <a-select-option
                  v-for="item in dropDownList.quote_tech"
                  :key="item.gzcbl002"
                  :value="item.gzcbl002"
                >
                  {{ item.gzcbl004 }}
                </a-select-option>
              </a-select>
              <a-select
                v-else-if="field.type === 'select' && field.key === 'xmqduc039'"
                :value="otherCost[field.key]"
                @change="value => otherCost[field.key] = value"
                size="small"
                style="width: 60%"
                class="small-select"
              >
                <a-select-option
                  v-for="item in dropDownList.quote_mold"
                  :key="item.gzcbl002"
                  :value="item.gzcbl002"
                >
                  {{ item.gzcbl004 }}
                </a-select-option>
              </a-select>
              <a-select
                v-else-if="field.type === 'select' && field.key === 'xmqduc043'"
                :value="otherCost[field.key]"
                @change="value => otherCost[field.key] = value"
                size="small"
                style="width: 60%"
                class="small-select"
              >
                <a-select-option
                  v-for="item in dropDownList.quote_state"
                  :key="item.gzcbl002"
                  :value="item.gzcbl002"
                >
                  {{ item.gzcbl004 }}
                </a-select-option>
              </a-select>
              <a-textarea
                v-else-if="field.type === 'textarea' && field.key !== 'xmqduc037'"
                :value="otherCost[field.key]"
                @change="e => otherCost[field.key] = e.target.value"
                :auto-size="{ minRows: 1, maxRows: 2 }"
                size="small"
              />
              <!-- 修改备注字段的显示方式 -->
              <a-textarea
                v-else-if="field.type === 'textarea' && field.key === 'xmqduc037'"
                :value="otherCost[field.key]"
                @change="e => otherCost[field.key] = e.target.value"
                :auto-size="{ minRows: 2, maxRows: 2 }"
                size="small"
              />
              <a-date-picker
                v-else-if="field.type === 'date'"
                :value="otherCost[field.key] ? dayjs(otherCost[field.key]) : null"
                @change="(_, dateString) => otherCost[field.key] = dateString"
                size="small"
                value-format="YYYY-MM-DD"
              />
              <span
                v-if="otherCost[field.key + 'Name']"
                class="external-info"
                :title="otherCost[field.key + 'Name']"
                :class="{ 'customer-info': field.key === 'xmqduc007' }"
              >
                {{ otherCost[field.key + 'Name'] }}
              </span>
              <span v-if="field.unit" class="unit">{{ field.unit }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 材料列表 -->
      <div class="section flex-section" v-show="!loading">
        <div class="tabs">
          <button @click="switchMaterialType('main')" :class="materialType === 'main' ? 'active' : ''">主材列表</button>
          <button @click="switchMaterialType('aux')" :class="materialType === 'main' ? '' : 'active'">辅材列表</button>
        </div>
        <div class="table-container table-container-adjusted" style="position: relative;">
          <!-- 表格加载状态 -->
          <div v-if="tableLoading" class="table-loading-overlay">
            <div class="table-loading-content">
              <a-spin size="large" />
              <p class="table-loading-text">数据加载中...</p>
            </div>
          </div>

          <SortableTable
            :data="paginatedMaterialList"
            :columns="materialColumns"
            :header-color="'#1F77B4'"
            :row-colors="['white', '#EFF4F9']"
            :show-sort-indicators="true"
            :sorted-indicator-color="'#fff'"
            :unsorted-indicator-color="'rgba(255, 255, 255, 0.5)'"
            :row-height="''"
            :font-size="'0.85vw'"
            @sort-change="handleMaterialSortChange"
          />
          <div v-if="paginatedMaterialList.length === 0" class="no-data">
            暂无数据
          </div>
        </div>
      </div>

      <!-- 成本计算 -->
      <div class="section flex-section cost-calculation-section">
        <h3>成本计算</h3>
        <div class="form-group cost-grid">
          <div class="item" v-for="field in costCalculationFields" :key="field.key">
            <label>{{ field.label }}</label>
            <a-input
              v-if="field.type !== 'select' && field.type !== 'date' && field.type !== 'textarea'"
              :value="costCalculation[field.key]"
              @change="e => costCalculation[field.key] = e.target.value"
              size="small"
            />
            <a-select
              v-else-if="field.type === 'select' && field.key === 'xmqduc071'"
              :value="costCalculation[field.key]"
              @change="value => costCalculation[field.key] = value"
              size="small"
              class="small-select"
            >
              <a-select-option
                v-for="item in dropDownList.quote_quantity"
                :key="item.gzcbl002"
                :value="item.gzcbl002"
              >
                {{ item.gzcbl004 }}
              </a-select-option>
            </a-select>
            <a-date-picker
              v-else-if="field.type === 'date'"
              :value="costCalculation[field.key] ? dayjs(costCalculation[field.key]) : null"
              @change="(_, dateString) => costCalculation[field.key] = dateString"
              size="small"
              value-format="YYYY-MM-DD"
            />
            <a-textarea
              v-else-if="field.type === 'textarea'"
              :value="costCalculation[field.key]"
              @change="e => costCalculation[field.key] = e.target.value"
              :auto-size="{ minRows: 1, maxRows: 2 }"
              size="small"
            />
            <span v-if="field.unit" class="unit">{{ field.unit }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载中提示 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-content">
        <a-spin size="large" />
        <p class="loading-text">数据加载中...</p>
      </div>
    </div>

    <template #extra>
      <a-space>
        <a-button type="primary" @click="handleExport" :loading="exportLoading">导出</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted } from 'vue';
import dayjs from 'dayjs';
import { SortableTable } from '@/components/custom';
import {
  getDitcApi,
  qecutmaterialListApi,
  qecutOneApi,
  qecutmaterialZlistApi, // 主材列表接口
  qecutmaterialFlistApi, // 辅材列表接口
  qecutExportApi // 导出模切报价单
} from '@/service/api/modules/die-cutting/die-cutting';

// 定义组件属性
const props = withDefaults(defineProps<{
  visible?: boolean;
  quotationData?: Record<string, any>;
}>(), {
  visible: false,
  quotationData: () => ({})
});

// 定义事件
const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'close'): void;
}>();

// 定义数据
const productInfo = ref<Record<string, any>>({});
const laborCost = ref<Record<string, any>>({});
const otherCost = ref<Record<string, any>>({});
const materialList = ref<any[]>([]);
const costCalculation = ref<Record<string, any>>({});

// 材料类型状态：main-主材，aux-辅材
const materialType = ref('main');

// 原始材料列表数据备份（用于排序）
const originalMaterialList: any[] = [];

const dropDownList = ref({
  quote_check: [],
  quote_tech: [],
  quote_mold: [],
  quote_quantity: [],
  quote_state: [],
  quote_material: []
});

// 表格加载状态
const tableLoading = ref(false);

// 计算当前页材料列表数据
const paginatedMaterialList = computed(() => {
  return materialList.value;
});

const loading = ref(false);
const exportLoading = ref(false);

// 产品资料字段定义
const productInfoFields = [
  { key: 'xmqducdocno', label: '报价单号' },
  { key: 'xmqduc001', label: '版本' },
  { key: 'xmqduc009', label: 'Model' },
  { key: 'xmqducdocdt', label: '报价日期', type: 'date' },
  { key: 'xmqduc002', label: '申请单号' },
  { key: 'xmqduc010', label: '终端货号' },
  { key: 'xmqduc004', label: '产品编码' },
  { key: 'xmqduc005', label: '品名' },
  { key: 'xmqduc007', label: '客户编号' },
  { key: 'xmqduc011', label: '报价人员' },
  { key: 'xmqduc013', label: '报价币种' },
  { key: 'xmqduc014', label: '税种' },
  { key: 'xmqduc006', label: '规格' },
  { key: 'xmqduc072', label: '汇率' },
  { key: 'xmqduc008', label: '客户货号' },
  { key: 'xmqduc015', label: '报价数量' },
  { key: 'xmqduc073', label: '税率' },
  { key: 'xmqduc074', label: 'BOM特性' },
  { key: 'xmqducstus', label: '报价单状态', type: 'select', width: 'long' } // 下拉选择，设置为长一点的宽度
];

// 定义人工成本字段
const laborCostFields = [
  { key: 'xmqduc016', label: '模切&冲压人工(人数)' },
  { key: 'xmqduc025', label: '关税(%)' },
  { key: 'xmqduc017', label: '手工对贴&除废人工(人数)' },
  { key: 'xmqduc026', label: '国外运费' },
  { key: 'xmqduc018', label: '包装检验人工(人数)' },
  { key: 'xmqduc027', label: 'MOQ' },
  { key: 'xmqduc089', label: '开料人工(人数)' },
  { key: 'xmqduc029', label: '单位' },
  { key: 'otherProductionStaff', label: '其他产量(人数)' },
  { key: 'xmqduc019', label: '模切&冲压薪资(人数/元)' },
  { key: 'xmqduc022', label: '模切&冲压产量(小时)' },
  { key: 'xmqduc020', label: '手工对贴&除废薪资(人数/元)' },
  { key: 'xmqduc023', label: '手工对贴&除废产量(小时)' },
  { key: 'xmqduc021', label: '包装检验薪资(人数/元)' },
  { key: 'xmqduc024', label: '包装检验产量(小时)' },
  { key: 'xmqduc090', label: '开料薪资(人数/元)' },
  { key: 'xmqduc091', label: '开料产量(小时)' },
  { key: 'xmqduc087', label: '其他薪资(人数/元)' },
  { key: 'xmqduc088', label: '其他产量(小时)' },
  { key: 'xmqduc028', label: '材质' }
];

// 定义其他成本字段
const otherCostFields = [
  { key: 'xmqduc030', label: '不良率(%)' },
  { key: 'xmqduc094', label: '模切次数' },
  { key: 'xmqduc031', label: '包装运输(%)' },
  { key: 'xmqduc095', label: '每圈数量' },
  { key: 'xmqduc049', label: '管理费(%)' },
  { key: 'xmqduc096', label: '调机米数' },
  { key: 'xmqduc068', label: '销售费(%)' },
  { key: 'xmqduc038', label: '工艺描述', type: 'select' },
  { key: 'xmqduc052', label: '研发费(%)' },
  { key: 'xmqduc039', label: '模具', type: 'select' },
  { key: 'xmqduc051', label: '财务费(%)' },
  { key: 'xmqduc040', label: '模具费用' },
  { key: 'xmqduc033', label: '其他(%)' },
  { key: 'xmqduc041', label: '模具寿命(万/模)' },
  { key: 'xmqduc042', label: '穴数' },
  { key: 'xmqduc043', label: '报价状态', type: 'select' },
  { key: 'xmqduc037', label: '备注', type: 'textarea' }
];

// 定义成本计算字段
const costCalculationFields = [
  { key: 'xmqduc045', label: '材料成本金额' },
  { key: 'xmqduc046', label: '委外成本金额' },
  { key: 'xmqduc047', label: '人工成本金额' },
  { key: 'xmqduc048', label: '运输成本' },
  { key: 'xmqduc049', label: '管理费' },
  { key: 'xmqduc050', label: '销售费' },
  { key: 'xmqduc051', label: '财务费' },
  { key: 'xmqduc052', label: '研发费' },
  { key: 'xmqduc053', label: '其他费用' },
  { key: 'xmqduc054', label: '模具费' },
  { key: 'xmqduc055', label: '包装费' },
  { key: 'xmqduc056', label: '合计成本' },
  { key: 'xmqduc057', label: '本市报价未税单价' },
  { key: 'xmqduc058', label: '本市报价含税单价' },
  { key: 'xmqduc059', label: '外币报价单价' },
  { key: 'xmqduc060', label: '目标报价' },
  { key: 'xmqduc061', label: '报价利润比(%)' },
  { key: 'xmqduc062', label: '材料占比(%)' },
  { key: 'xmqduc063', label: '客户确认未税单价' },
  { key: 'xmqduc064', label: '客户确认含税单价' },
  { key: 'xmqduc065', label: '客户确认外币单价' },
  { key: 'xmqduc066', label: '确认利润比(%)' },
  { key: 'xmqduc071', label: '量产否', type: 'select' },
  { key: 'xmqduc067', label: '人工占比(%)' }
];

// 定义材料列表列
const materialColumns = [
  { key: 'xmqeucseq', label: '项次', width: '2.5vw' },
  { key: 'xmqeuc001', label: '版本', width: '3.75vw' },
  { key: 'xmqeuc002Name', label: '材料用途', width: '5vw' },
  { key: 'xmqeuc003', label: '物料编号', width: '6.25vw' },
  { key: 'xmqeuc004', label: '品名', width: '7.5vw' },
  { key: 'xmqeuc005', label: '规格', width: '6.25vw' },
  { key: 'xmqeuc006', label: '单位', width: '3.125vw' },
  { key: 'xmqeuc007', label: '分切卷数', width: '4.375vw' },
  { key: 'xmqeuc008', label: '幅宽', width: '3.75vw' },
  { key: 'xmqeuc009', label: '行程', width: '4.375vw' },
  { key: 'xmqeuc010', label: '穴数', width: '3.125vw' },
  { key: 'xmqeuc011', label: '产量', width: '3.75vw' },
  { key: 'xmqeuc012', label: '原材料单价', width: '5vw' },
  { key: 'xmqeuc013', label: '单品材料价', width: '5.625vw' },
  { key: 'xmqeuc014', label: '本币单价', width: '5vw' },
  { key: 'xmqeuc015', label: '用量(份)', width: '4.375vw' },
  { key: 'xmqeuc017', label: '原始宽度', width: '4.375vw' },
  { key: 'xmqeuc022', label: '平均价', width: '5vw' },
  { key: 'xmqeuc023', label: '基准价', width: '5vw' },
  { key: 'xmqeuc016', label: '备注', width: '6.25vw' },
  { key: 'xmqeuc025', label: '材料备注1', width: '5vw' },
  { key: 'xmqeuc026', label: '材料备注2', width: '5vw' },
];

// 获取状态文本
const getStatusText = (statusCode) => {
  if (!statusCode || !dropDownList.value.quote_check || dropDownList.value.quote_check.length === 0) {
    return statusCode;
  }

  const statusItem = dropDownList.value.quote_check.find(item => item.gzcbl002 === statusCode);
  return statusItem ? statusItem.gzcbl004 : statusCode;
};

// 处理材料列表排序变化
const handleMaterialSortChange = (sortState) => {
  console.log('材料列表排序状态:', sortState);
  // 在这里可以处理排序逻辑
};

// 关闭抽屉
const closeDrawer = () => {
  emit('update:visible', false);
  emit('close');
};

// 抽屉打开/关闭后的回调
const afterOpenChange = (visible) => {
  if (visible) {
    loadData();
  }
};

// 关闭事件处理
const onClose = () => {
  closeDrawer();
};

// 加载数据
const loadData = async () => {
  // 检查必要参数
  if (!props.quotationData || !props.quotationData.xmqducdocno || !props.quotationData.xmqduc001) {
    console.error('缺少必要参数：单号或版本不能为空');
    loading.value = false;
    return;
  }

  loading.value = true;
  try {
    // 获取下拉选项数据
    const dictRes = await getDitcApi({});
    dropDownList.value = {
      ...dropDownList.value,
      ...dictRes.data
    };

    // 获取报价单详情数据
    const detailParams = {
      xmqducent: props.quotationData.xmqducent,
      xmqducdocno: props.quotationData.xmqducdocno,
      xmqduc001: props.quotationData.xmqduc001
    };

    const detailRes = await qecutOneApi(detailParams);
    if (detailRes.otherData.code === 200) {
      const apiData = detailRes.otherData.data;

      // 填充产品信息
      productInfo.value = { ...apiData };

      // 填充人工成本信息
      laborCost.value = { ...apiData };

      // 填充其他成本信息
      otherCost.value = { ...apiData };

      // 填充成本计算信息
      costCalculation.value = { ...apiData };
    }

    // 加载材料数据（根据当前类型调用不同的API）
    loadMaterialData();
  } catch (error) {
    console.error('数据加载失败:', error);
    // 出错时清空数据
    productInfo.value = {};
    laborCost.value = {};
    otherCost.value = {};
    costCalculation.value = {};
    materialList.value = [];
  } finally {
    loading.value = false;
  }
};

// 切换材料类型
const switchMaterialType = (type: string) => {
  if (materialType.value !== type) {
    materialType.value = type;
    // 切换时重新加载对应类型的数据
    loadMaterialData();
  }
};

// 加载材料数据（根据当前类型调用不同的API）
const loadMaterialData = () => {
  // 检查必要参数
  if (!props.quotationData || !props.quotationData.xmqducdocno) {
    console.error('缺少必要参数：单号不能为空');
    return;
  }

  tableLoading.value = true;

  const params = {
    xmqeucent: props.quotationData.xmqducent,
    xmqeucdocno: props.quotationData.xmqducdocno,
    xmqeuc001: props.quotationData.xmqduc001 || 0
  };

  const apiCall = materialType.value === 'main'
    ? qecutmaterialZlistApi
    : qecutmaterialFlistApi;

  apiCall(params)
    .then((res: any) => {
      const data = res.otherData;
      if (data.code === 200) {
        materialList.value = data.data || [];

        // 同时更新原始材料列表数据备份（用于排序）
        originalMaterialList.length = 0;
        originalMaterialList.push(...materialList.value);
      } else {
        materialList.value = [];
        console.error('获取材料数据失败:', data.message);
      }
    })
    .catch((error: any) => {
      console.error('获取材料数据异常:', error);
      materialList.value = [];
    })
    .finally(() => {
      tableLoading.value = false;
    });
};

// 移除watch监听器，避免无限递归更新
watch(
  () => props.quotationData,
  (newVal) => {
    if (newVal && newVal.xmqducdocno && newVal.xmqduc001) {
      loadData();
    }
  },
  { immediate: true }
);

// 导出功能
const handleExport = () => {
  if (!productInfo.value.xmqduc001 || !productInfo.value.xmqducdocno) {
    console.error('缺少导出参数');
    return;
  }

  const exportParams = {
    xmqducent: productInfo.value.xmqducent,
    xmqducdocno: productInfo.value.xmqducdocno,
    xmqduc001: productInfo.value.xmqduc001 || 0
  };

  exportLoading.value = true;

  qecutExportApi(exportParams)
    .then((res: any) => {
      // 创建下载链接
      const blob = new Blob([res.data]);
      const fileName = `报价明细_${exportParams.xmqducdocno}.xlsx`;
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      URL.revokeObjectURL(link.href);
    })
    .catch((error: any) => {
      console.error('导出失败:', error);
    })
    .finally(() => {
      exportLoading.value = false;
    });
};

</script>

<style scoped>
.quotation-form {
  height: 100%;
  overflow-y: auto;
  padding: 0.52vw;
  box-sizing: border-box;
  background-color: #f0f2f5;
}

.vertical-section {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  margin-bottom: 0.5vw;
}

.section {
  background: white;
  padding: 0.25vw;
  border-radius: 0.1875vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0,0,0,0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.flex-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 0.5vw;
}

.section h3 {
  margin: 0 0 0.25vw 0;
  padding-bottom: 0.125vw;
  border-bottom: 0.0625vw solid #eee;
  color: #1F77B4;
  font-size: 0.9375vw;
  font-weight: 600;
  flex: 0 0 auto;
}

.section-title {
  margin: 0 0 0.25vw 0;
  padding-bottom: 0.125vw;
  border-bottom: 0.0625vw solid #eee;
  color: #1F77B4;
  font-size: 0.9375vw;
  font-weight: 600;
  flex: 0 0 auto;
}

.form-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2vw;
  flex: 1;
  overflow-y: auto;
}

.item {
  display: flex;
  flex-direction: column;
  /* margin-bottom: 0.25vw; */
}

.item label {
  font-size: 0.86vw;
  /* margin-bottom: 0.125vw; */
  color: #666;
}

.item :deep(.ant-input),
.item :deep(.ant-select),
.item :deep(.ant-picker) {
  font-size: 0.9vw;
  height: 1.8vw;
}

.item :deep(.ant-input-disabled) {
  color: rgba(0, 0, 0, 0.65);
  background-color: #f5f5f5;
}

.item :deep(.ant-select-disabled) {
  color: rgba(0, 0, 0, 0.65);
}

.item :deep(.ant-select-disabled .ant-select-selector) {
  background-color: #f5f5f5;
}

.item :deep(.ant-textarea-disabled) {
  color: rgba(0, 0, 0, 0.65);
  background-color: #f5f5f5;
}

.item :deep(.ant-input-affix-wrapper) {
  font-size: 0.8125vw;
  height: 1.8vw;
}

.full-width {
  grid-column: span 4;
}

.table-container {
  overflow: hidden;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.table-container-adjusted {
  flex: 1 1 15vw;
}

.cost-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3125vw;
  flex: 1;
  overflow-y: auto;
  margin: 0;
}

.cost-calculation-section {
  flex: 0 1 auto;
}

.cost-grid .item {
  /* margin-bottom: 0.25vw; */
}

/* 修改下拉选择框样式，实现自适应 */
.small-select {
  width: 100% !important;
}

.small-select :deep(.ant-select-selector) {
  font-size: 0.8125vw;
  padding: 0.0625vw 0.3125vw !important;
  height: 1.8vw !important;
  width: 100% !important;
  display: flex;
  align-items: center;
}

.small-select :deep(.ant-select-arrow) {
  font-size: 0.8125vw;
}

.quote-status-select {
  width: 100% !important;
}

.quote-status-select :deep(.ant-select-selector) {
  width: 100% !important;
  display: flex;
  align-items: center;
}

.examine-icon,
.quote-state-icon {
  width: 3.125vw;
  height: 1.8vw;
  margin-left: 0.3125vw;
  vertical-align: middle;
}

/* 加载中样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-content {
  text-align: center;
}

.loading-text {
  margin-top: 0.625vw;
  font-size: 0.9375vw;
  color: #666;
}

.no-data {
  position: absolute;
  top: 1.625vw;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75vw;
  color: #999;
  background: white;
}

/* 报价单状态选择框宽度调整 - 使用更具体的选择器避免影响其他元素 */
.item:has(.quote-status-select-wide) {
  grid-column: span 2;
}

.quote-status-select-wide {
  width: 100% !important;
}

/* 报价单状态选择框宽度调整 - 使用更具体的选择器 */
:deep(.quote-status-select-wide.ant-select) {
  width: 8vw !important;
}

:deep(.quote-status-select-wide.ant-select .ant-select-selector) {
  width: 100% !important;
  min-width: 8vw !important;
}

/* 材料列表标签页样式 */
.tabs {
  display: flex;
  border-bottom: 1px solid #d9d9d9;
}

.tabs button {
  font-size: 0.8vw;
  padding: 0.1vw 0.8vw;
  border: 1px solid #d9d9d9;
  background: #fafafa;
  cursor: pointer;
  border-bottom: none;
  border-radius: 0.3vw 0.3vw 0 0;
  margin-right: -1px;
}

.tabs button.active {
  background: #1F77B4;
  color: white;
  border-color: #1F77B4;
}

/* 表格加载状态样式 */
.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.table-loading-content {
  text-align: center;
}

.table-loading-text {
  margin-top: 0.5vw;
  font-size: 0.8125vw;
  color: #666;
}

.external-info {
  font-size: 0.7vw;
  color: #1F77B4;
  white-space: normal;
  word-break: break-all;
  /* width: 6vw; */
  overflow: visible;
  flex: 1 1 auto;
  cursor: pointer;
  position: relative;
  margin-top: 0.125vw;
}

.customer-info {
  white-space: normal;
  word-break: break-all;
  /* width: 6vw; */
  overflow: visible;
}

.unit {
  margin-left: 0.25vw;
  color: #666;
  font-size: 0.75vw;
}

/* 为"手工对贴&除废薪资(人数/元)"字段添加特殊宽度 */
.special-wage-field {
  width: 12vw !important;
}

/* 响应式优化 - 针对50%宽度做调整 */
@media (max-width: 750px) {
  .form-group {
    grid-template-columns: 1fr;
  }

  .full-width {
    grid-column: span 1;
  }

  .cost-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .table-container-adjusted {
    flex: 1 1 15vw;
  }
}

@media (max-width: 500px) {
  .cost-grid {
    grid-template-columns: 1fr;
  }

  .external-info {
    width: auto;
  }

  .customer-info {
    width: auto;
  }
}
</style>

